<template>
  <div>
    <div class="header-container" id="header-container">
      <van-row class="center2father" type="flex" justify="center" align="center">
        <van-col span="4">
          <van-icon class="header-icon" :name="left_icon_name" @click="left_icon_click" />
        </van-col>
        <van-col span="16">{{ title }}</van-col>
        <van-col span="4">
          <van-icon class="header-icon" :name="right_icon_name" @click="right_icon_click" />
        </van-col>
      </van-row>
    </div>
    <van-popup
      v-model="leftPopupShow"
      position="left"
      get-container="body"
      round
      :style="{ width: '60%', height: '100%' }"
    >
      <div class="left-popup-header" :style="note">
        <div class="left-popup-header-body">
          <van-row class="user-card" type="flex" align="center">
            <van-col>
              <van-image
                round
                class="photo"
                src="./static/icon/qq_icon.png"
                width="70px"
                height="70px"
              />
            </van-col>
            <van-col class="left-popup-header-body-uname">
              <h1>Craipy</h1>
            </van-col>
          </van-row>
          <van-row align="center">
            <van-col span="12" offset="12">
              <van-button type="primary" size="mini">登录</van-button>
              <van-button type="primary" size="mini">注册</van-button>
            </van-col>
          </van-row>
        </div>
      </div>
      <van-cell-group>
        <van-cell icon="location-o"  title="首页"  />
        <van-cell icon="location-o"  title="社区" />
        <van-cell icon="location-o"  title="搜索" />
        <van-cell icon="location-o"  title="单元格" />
        <van-cell icon="location-o"  title="单元格" />
        <van-cell icon="location-o"  title="意见反馈" />
      </van-cell-group>
    </van-popup>
    <van-popup
      v-model="topPopupShow"
      position="top"
      :overlay="false"
      round
      :style="{ width: '100%', height: '30%', top: '8%' }"
    >
      <van-search v-model="search_v" placeholder="请输入搜索关键词" />
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'myHeaders',
  props: ['left_icon', 'name', 'right_icon'],
  data() {
    return {
      leftPopupShow: false,
      topPopupShow: false,
      search_v: '',
      note: {
        background:
          // 'url(' + require('../../static/image/xk_bg.jpeg') + ')',
          'url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593057781558&di=7eceab0927f28bb4f733e9acf2b61298&imgtype=0&src=http%3A%2F%2Fimg.ewebweb.com%2Fuploads%2F20191225%2F20%2F1577277759-HgRsdZIwar.jpg") no-repeat center top',
        'background-size': '100%',
        width: '100%',
        height: '20%'
      }
    }
  },
  methods: {
    left_icon_click() {
      try {
        this.$parent.headers_left_icon_click()
      } catch (err) {
        this.leftPopupShow = !this.leftPopupShow
      }
    },
    right_icon_click() {
      try {
        this.$parent.headers_right_icon_click()
      } catch (err) {
        this.topPopupShow = !this.topPopupShow
      }
    }
  },
  computed: {
    left_icon_name: function() {
      if (this.left_icon) {
        return this.left_icon
      } else {
        return 'user-circle-o'
      }
    },
    title: function() {
      if (this.name) {
        return this.name
      } else {
        return '手机模板'
      }
    },
    right_icon_name: function() {
      if (this.right_icon) {
        return this.right_icon
      } else {
        return 'search'
      }
    }
  }
}
</script>
<style scoped>
.header-container {
  position: fixed;
  display: inline-block;
  height: 9%;
  width: 100%;
  top: 0;
  left: 0;
  /* background-color:cornflowerblue; */
  font-size: 22px;
  border-radius: 7px;
  z-index: 102;
}
.center2father {
  height: 100%;
}
.header-icon {
  top: 3px;
}
.left-popup-header-body {
  width: 100%;
  height: 100%;
  align-self: center;
}
.left-popup-header-body-uname {
  padding-left: 5%;
}
.user-card {
  padding-top: 10%;
  padding-left: 7%;
}
</style>
